<template>
  <div class="tabdetial">
    <Nav></Nav>
    <div class="banner-wrap">
      <img class="banner" :src="tabdetailBg" />
    </div>
    <div class="wrap">
        <div class="tabs">
        <div class="tabs-title">{{info.titile}} <block v-if="type == 'zs'" class="box"> <span class="circle">&nbsp;</span>招生信息 </block></div>
         <div v-if="type != 'zs'" class="schools-nav">
      <div
        :style="{ background: tabIndex == 0 ? '#e9efff' : '' }"
        class="schools-nav-left"
        @click="changeNav(0)"
      >
        大学介绍
      </div>
      <div
        :style="{ background: tabIndex == 1 ? '#e9efff' : '' }"
        class="schools-nav-left"
        @click="changeNav(1)"
      >
        专业介绍
      </div>
    </div>
    <!-- <div v-else class="schools-nav">
      <div
        style="background: #e9efff"
        class="schools-nav-left"
        @click="changeNav(0)"
      >
        招生信息
      </div>
    </div> -->
    <p v-if="tabIndex == 0" v-html="info.content_one"></p>
    <p v-if="tabIndex == 1 || type == 'zs'" v-html="info.content_two"></p>
        <p v-html="info.content_one"></p>
      </div>
  

    </div>

    <Footer></Footer>
  </div>
</template>

<script setup>
import Footer from '../../components/pc/Footer.vue';
import Nav from '../../components/pc/nav.vue';
import schoolProject from '../../components/pc/schoolProject.vue';
import introduceProject from '../../components/pc/introduceProject.vue';
import consultationProject from '../../components/pc/consultationProject.vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { getSchoolsDetailsPc,getAdmissionsDetailPc } from '../../api/apiList/pcApi.js';
import tabdetailBg from '../../assets/pc/school-bg.png';
import homepageTab2 from '../../assets/pc/homepage-tab2.png';
import homepageTab3 from '../../assets/pc/homepage-tab3.png';
import homepageTab4 from '../../assets/pc/homepage-tab4.png';
import homepageTab5 from '../../assets/pc/homepage-tab5.png';
let info = ref({});
let currentIndex = ref(-1);
const route = useRoute();
const id = route.query.id;
const type = route.query.type;
const tabIndex = ref(0);
onMounted(async () => {
    // 获取列表数据
  if (type == 'zs') {
    await getAdmissionsDetailPc(id).then((res) => {
      const { result } = res;
      info.value = result;
    });
  } else {
    await getSchoolsDetailsPc(id).then((res) => {
      const { result } = res;
      info.value = result;
    });
  }
});
const mouseOver = (index) => {
  currentIndex.value = index;
};
const changeNav = (index) => {
  tabIndex.value = index;
};
</script>

<style lang="less" scoped>
.tabdetial {
  .box {
    display: flex;
    align-items: center;
  }
  .wrap {
    position: relative;
    width: 1201Px;
    margin: 0 auto;
    .tabs {
    margin-top: 10Px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .tabs-title {
      display: flex;
      align-items: center;
      font-size: 28Px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;
      line-height: 40Px;
      margin-bottom: 43Px;
      .circle {
        display: inline-block;
        width: 12Px;
        height: 12Px;
        background: #d8d8d8;
        border-radius: 12Px;
        margin: 0 32Px;
      }
    }
    .tabs-subTitle {
      font-size: 22Px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 30Px;
      margin-bottom: 37Px;
    }
  }
  }
  .banner-wrap {
    position: relative;
    width: 100vw;
    height: auto;
  }
  .banner {
    width: 100vw;
    height: auto;
    margin-bottom: 30Px;
  }
  .schools-nav {
  height: 47px;
  width: 100%;
  display: flex;
  background: #fff;
  border-radius: 30px;
  text-align: center;
  line-height: 47px;
  border: 2px solid #e9efff;

  .schools-nav-left {
    flex: 1;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    width: 5.21739rem;
    border-radius: 30px;
  }
}

.schoolDetail {
  background-image: url('../../assets/images/school-detail-bg.jpg');
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding: 76px 20px;
}
 


}
</style>
